<template>
	<view>
		<view style="background-color: #ff2525; margin-bottom: 20rpx; height: 60px;">
			<view v-if="finish != 0">
				<swiper :indicator-dots="false" class="swiper">
					<swiper-item v-for="item in tabNum">
						<u-grid :col="2" :border="false">
							<u-grid-item v-for="(baseListItem, baseListIndex) in baseList.slice(item * 2, (item + 1) * 2)" :key="baseListIndex">
								<view class="next_shopBox">
									<view
										v-if="baseListItem.seckillStatus == 1"
										class="next_shop"
										@click="changeClass(baseListItem.id)"
										:class="{ 'active-class': nowIndex == baseListItem.id }"
										style="font-size: 24rpx; font-weight: 700;"
									>
										<view>
											<div style="display: flex;">
												<div style="margin-left: 13rpx; margin-right: 4rpx; color: #ff2525;">距离本场结束</div>
												<div><u-count-down @finish="finishClose(timeNum)" :time="timeNum" format="HH:mm:ss"></u-count-down></div>
											</div>
										</view>
									</view>
									<view
										v-else
										class="next_shop"
										@click="changeClass(baseListItem.id)"
										:class="{ 'active-class': nowIndex == baseListItem.id }"
										style="font-size: 30rpx;"
									>
										<template v-if="baseListIndex == 0">
											<view>
												<div style="display: flex;">
													<div style="font-size: 24rpx; margin-left: 13rpx; margin-right: 4rpx; color: #ff2525;">距离本场开始</div>
													<div><u-count-down @finish="finishClose(timeNum)" :time="timeNum" format="HH:mm:ss"></u-count-down></div>
												</div>
											</view>
										</template>
										<p v-else>{{ baseListItem.timeName }}即将开抢</p>
									</view>
								</view>
							</u-grid-item>
						</u-grid>
					</swiper-item>
				</swiper>
			</view>

			<view></view>
		</view>

		<view style="margin-bottom: 20rpx;" v-if="finish != 0" @click="goShopInfo(seckillList, i)" v-for="i in isSeckillList" :key="i.id" class="shop">
			<view class="left"><image style="width: 100%; height: 100%;" :src="`${imageUrl}${i.image}`" mode="widthFix"></image></view>
			<view class="rigth">
				<p class="shopInfo" style="font-size: 34rpx; height: 130rpx;">{{ i.goodsName }}</p>
				<p class="shopInfo" style="color: #e60012;">￥{{ i.seckillPrice }}</p>
				<view style="display: flex; margin-bottom: 16rpx;">
					<view style="width: 280rpx; margin-right: 40rpx;">
						<!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress> -->
						<u-line-progress
							v-if="i.quantity > 0"
							:showText="i.quantity / i.stockCount > (0.5).toFixed(2)"
							:percentage="((i.quantity / i.stockCount) * 100).toFixed(2)"
							activeColor="#ff0000"
						></u-line-progress>
						<u-line-progress v-else :showText="0" :percentage="0" activeColor="#ff0000"></u-line-progress>
					</view>
					<view>
						<p style="font-size: 26rpx; margin-bottom: 6rpx; line-height: 26rpx;">还剩{{ i.quantity }}件</p>
					</view>
				</view>
				<view class="shop_price">
					<view class="price_left">超值速抢</view>
					<view class="price_right">
						<p style="text-decoration: line-through">￥{{ i.price }}</p>
						<p>
							秒杀价:
							<span style="font-weight: 700; color: #fff; font-size: 25rpx;">￥{{ i.seckillPrice }}</span>
						</p>
					</view>
				</view>
			</view>
		</view>
		<view v-if="finish == 0" style="color: black; width: 100%; ">
			<view style="position: absolute; top: 40%; right: 50%; transform: translateX(50%);">
				<view style="margin-bottom: 20rpx; text-align: center;">暂无活动</view>
				<view style="width: 200rpx; height: 100rpx;"><button @click="goIndex" style="background-color: #e60012; color: #fff;">返回</button></view>
			</view>
		</view>
	</view>
</template>

<script>
import { timeNow, getAll, getByGoodsTypeId } from '@/api/seckill.js';
import config from '@/config';
import { selectGoodsType } from '@/api/goodsType.js';
import { getGoods } from '@/api/goods.js';
export default {
	data() {
		return {
			tabNum: 0,
			baseList: [
				{
					name: 'photo',
					title: '图片'
				},
				{
					name: 'lock',
					title: '锁头'
				},
				{
					name: 'star',
					title: '星星'
				},
				{
					name: 'photo',
					title: '图片'
				},
				{
					name: 'lock',
					title: '锁头'
				},
				{
					name: 'star',
					title: '星星'
				}
			],
			imageUrl: config.imageUrl,
			timeData: {},
			endTime: 1,
			startTime: 1,
			nowTime: 0,
			startTimes: '',
			timeNum: 0,
			endTimes: '',
			nowIndex: '',
			typeList: [],
			seckillList: [],
			seckillListId: 0,
			isSeckillList: [],
			currentIndex: 0,
			searchId: 1,
			id: '',
			finish: 1,
			firstIn: true
		};
	},
	onLoad(options) {
		// this.getType();
		this.tabNum = Math.round(this.baseList.length / 4);
		// console.log(this.baseList, this.baseList.length, '9', this.baseList.length % 5);
		this.getGoodsList();
	},
	onShow(e) {
		// this.initPage()
	},
	watch: {},
	methods: {
		goIndex() {
			uni.switchTab({
				url: 'index'
			});
		},
		finishClose(e) {
			if (e < 0) {
				// uni.switchTab({
				// 	url: 'index'
				// })
				this.reload();
			} else if (e > 0) {
				// this.reload();
			}
		},
		reload() {
			if (!this.firstIn) {
				// 页面重载
				const pages = getCurrentPages();
				// 声明一个pages使用getCurrentPages方法
				const curPage = pages[pages.length - 1];
				// 声明一个当前页面
				curPage.onLoad(curPage.options); // 传入参数
				curPage.onShow();
				curPage.onReady();
			} else {
				this.firstIn = false;
			}
			// 执行刷新
		},
		getGoodsList() {
			console.log(this.id, '999');
			getAll(this.id).then(res => {
				if (res.length > 0) {
					this.finish = 1;
					this.baseList = res;
					console.log(res, '99');
					this.seckillList = res[0];
					this.nowIndex = this.seckillList.id;
					this.isSeckillList = res[0].detailList;
					this.startTimes = this.seckillList.startTime;
					this.endTimes = this.seckillList.endTime;
					// 获取距离开始时间
					let isStartTime = Date.parse(new Date(this.startTimes));
					let Time = isStartTime - this.nowTime;
					this.startTime = Time;
					// 获取距离结束时间
					let isEndTime = Date.parse(new Date(this.endTimes));
					let Times = isEndTime - this.nowTime;
					this.endTime = Times;
					if (this.seckillList.seckillStatus == 0) {
						//未开始
						let isStartTime = Date.parse(new Date(this.startTimes));
						this.timeNum = isStartTime - this.nowTime;
					} else if (this.seckillList.seckillStatus == 1) {
						let isEndTime = Date.parse(new Date(this.endTimes));
						this.timeNum = isEndTime - this.nowTime;
						//开始
					} else {
					}
				} else {
					this.finish = 0;
				}
			});
			timeNow().then(res => {
				this.nowTime = res;
			});
		},
		changeClass(index) {
			this.nowIndex = index;
			this.id = index;
			getAll(this.id).then(res => {
				this.isSeckillList = res[0].detailList;
			});
		},
		onChange(e) {
			this.timeData = e;
		},
		goShopInfo(e, i) {
			uni.navigateTo({
				url: `seckillDetail?info=${JSON.stringify(i)}` + '&activityId=' + e.id + '&id=' + i.id
				// url: 'seckillDetail?id=' + i.id + '&activityId=' + e.id + info=${JSON.stringify(detailList)}
			});
		},
		// 导航栏跳转
		onChangeNav(e) {
			this.currentIndex = e.index;
			// this.getList()
		}
		// getType(e) {
		// 	// this.$showLoading()
		// 	selectGoodsType().then(res => {
		// 			this.typeList = res;
		// 			this.getList();
		// 		})
		// 		.catch(error => {});
		// },
		// getList(e) {
		// 	// console.log(e, '');
		// 	const id = this.typeList[this.currentIndex].id;
		// 	getByGoodsTypeId({
		// 		goodsTypeId: id,
		// 		status: this.searchId
		// 	}).then(res => {
		// 		// this.goodsList = res;
		// 		this.isSeckillList = res
		// 	}).catch(error => {});
		// }
	}
};
</script>
<style lang="scss">
.time {
	@include flex;
	align-items: center;

	&__custom {
		margin-top: 0px;
		// width: 22px;
		height: 22px;
		// background-color: #fff;
		border-radius: 4px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;

		&__item {
			font-size: 24rpx;
			text-align: center;
		}
	}

	&__doc {
		padding: 0px 4rpx;
	}

	&__item {
		color: #606266;
		font-size: 24rpx;
		margin-right: 4px;
	}
}

.shop {
	display: flex;
	justify-content: space-between;
	margin-bottom: 36rpx;
}

.shop .left {
	height: 300rpx;
	width: 260rpx;
	// background-color: skyblue;
	margin-right: 30rpx;
	margin-left: 20rpx;
}

.shop .rigth {
	height: 240rpx;
	width: 480rpx;
	font-size: 34rpx;
}

.shop .shopInfo {
	font-weight: 600;
}

.shop_price {
	color: #9e571c;
	display: flex;
	justify-content: space-between;
	width: 430rpx;
	background-color: #f4cf89;
	border-radius: 16rpx;
}

.shop_price .price_left {
	line-height: 80rpx;
	font-weight: 700;
	margin-left: 20rpx;
	font-size: 32rpx;
}

.shop_price .price_right {
	width: 215rpx;
	background-color: #ff2525;
	color: #f2ebf0;
	font-size: 28rpx;
	padding-left: 20rpx;
	border-radius: 16rpx;
}

.next_shopBox {
	display: flex;
	justify-content: space-between;
	padding: 0 20rpx;
}

.next_shop {
	margin-top: 20rpx;
	width: 300rpx;
	height: 74rpx;
	border-style: none;
	border-color: unset;
	// color: rgb(255, 37, 37);
	color: #873800;
	border-radius: 8px;
	font-size: 14px;
	padding: 0px;
	text-align: center;
	line-height: 20px;
	font-weight: bold;
	font-style: normal;
	background: rgb(242, 242, 247);
	line-height: 74rpx;
}

.active-class {
	color: #268bd2;
}

.u-count-down__text {
	color: #ff2525 !important;
	font-size: 28rpx !important;
	line-height: 74rpx !important;
}
</style>

<style lang="scss">
.grid-text {
	font-size: 14px;
	color: #909399;
	padding: 10rpx 0 20rpx 0rpx;
	/* #ifndef APP-PLUS */
	box-sizing: border-box;
	/* #endif */
}
</style>
